<template>
  <div class="big-screen-box-live">
    <el-button type="primary" class="back-btn" @click="$router.go(-1)" plain>返回</el-button>
    <el-row class="screen-header" justify="space-evenly" align="middle">
      <el-col :span="6">
        <div class="left-date-box">

          <!-- <p class="date-p"> {{ currentTime }}</p>
          <p class="week-p">{{ weekDay }}</p> -->

          <p class="date-p"> 主播名字
            <el-select v-model="selectVal" size="small" style="width: 100px !important; margin-left: 15px;" clearable>
              <el-option v-for="index in 22" :key="index" :label="'主播' + index" :value="index" />
            </el-select>
          </p>

        </div>
      </el-col>
      <el-col :span="8">
        <h2 class="screenTitle">{{ screenTitle }}</h2>
        <!-- mqtt 测试 -->
        <!-- <mqtt /> -->
      </el-col>
      <el-col :span="6">
        <div class="right-date-box">
          周期：
          <el-button type="primary" plain>本月</el-button>
          <el-button type="primary" plain>本周</el-button>
          <el-button type="primary" plain>本日</el-button>

        </div>
      </el-col>
    </el-row>
    <div class="person-list-box">
      <div v-for="(item, index) in 4" :key="index" class="person-box screen-border-style">

        <h3 class="screen-title-box position-left">主播名字</h3>
        <h2>单场直播的标题</h2>
        <div class="person-info-box">
          <div class="left-avtar">
            <img :src="defAva" />
            <div class="info-content-box">
              <div class="info-content">
                <span class="info-title">直播时间</span>
                <span class="info-value">2024-5-15 12:30:53</span>
              </div>
              <div class="info-content">
                <span class="info-title">直播时长 </span>
                <span class="info-value">01:35:38</span>
              </div>
            </div>

          </div>

          <div class="right-info">
            <div class="info-content">
              <span class="info-title">观看人数 </span>
              <span class="info-value">5000000</span>
            </div>
            <div class="info-content">
              <span class="info-title">上车商品</span>
              <span class="info-value">200000</span>
            </div>
            <div class="info-content">
              <span class="info-title">订单金额</span>
              <span class="info-value">600000</span>
            </div>
            <div class="info-content">
              <span class="info-title">下单人数</span>
              <span class="info-value">1123</span>
            </div>
            <div class="info-content">
              <span class="info-title">售卖数量</span>
              <span class="info-value">30000</span>
            </div>
            <div class="info-content">
              <span class="info-title">利润金额</span>
              <span class="info-value">3000023</span>
            </div>
            <div class="info-content">
              <span class="info-title">退单人数</span>
              <span class="info-value">12</span>
            </div>
            <div class="info-content">
              <span class="info-title">退单数量</span>
              <span class="info-value">122</span>
            </div>
            <div class="info-content">
              <span class="info-title">退款金额</span>
              <span class="info-value">12234</span>
            </div>
          </div>
        </div>
      </div>
      <div class=" flex flex-row justify-end">
        <el-pagination class="pagination-box" layout="prev, pager, next" :total="100" />
      </div>
      <pagination class="pagination-box" v-show="total > 0" :total="100000" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </div>

</template>

<script setup name="User" lang="ts">
import { listUser, getUser, delUser, addUser, updateUser } from '@/api/system/hmUser';
import { UserVO, UserQuery, UserForm } from '@/api/system/hmUser/types';
import { hmSupplierList, hmSupplierGet, hmSupplierPut } from '@/api/group/supplier/index'
import { SupplierTable } from '@/api/group/supplier/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { validateSpaceAndEmoji } from '@/utils/validate'

import defAva from '@/assets/images/person-avatar.png';

const screenTitle = ref('惠麦销售数据统计大屏');

const currentTime = ref(new Date().toLocaleTimeString());

const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString();
};

// 今日周几
const weekDay = computed(() => {
  const dayNumber = new Date().getDay();
  return weekDays[dayNumber];
});


const userList = ref<UserVO[]>([]);
// const userList = ref<UserVO[]>();
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const infoData: UserForm = reactive({})
const selectVal = ref('');
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: UserForm = {
  userId: undefined,
  deptId: undefined,
  userName: undefined,
  nickName: undefined,
  userType: undefined,
  email: undefined,
  phonenumber: undefined,
  sex: undefined,
  avatar: undefined,
  password: undefined,
  status: undefined,
  loginIp: undefined,
  loginDate: undefined,
  remark: undefined,
  supplier: undefined,
  contactName: undefined,
  gender: undefined,
  phone: undefined,
  wechat: undefined,
  department: undefined,
  position: undefined,
  counterpart: undefined,
  createdAt: undefined
}
const data = reactive<PageData<UserForm, UserQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptId: undefined,
    userName: undefined,
    nickName: undefined,
    userType: undefined,
    email: undefined,
    phonenumber: undefined,
    sex: undefined,
    avatar: undefined,
    password: undefined,
    status: undefined,
    loginIp: undefined,
    loginDate: undefined,
    supplier: undefined,
    contactName: undefined,
    gender: undefined,
    phone: undefined,
    wechat: undefined,
    department: undefined,
    position: undefined,
    counterpart: undefined,
    createdAt: undefined,
  },
  rules: {
    userId: [
      { required: true, message: "用户ID不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    deptId: [
      { required: true, message: "部门ID不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    userName: [
      { required: true, message: "用户账号不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    nickName: [
      { required: true, message: "用户昵称不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    userType: [
      { required: true, message: "用户类型不能为空", trigger: "change" }
    ],
    email: [
      { required: true, message: "用户邮箱不能为空", trigger: "blur" }
    ],
    phonenumber: [
      { required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
    ],
    sex: [
      { required: true, message: "用户性别不能为空", trigger: "change" }, { validator: validateSpaceAndEmoji, }
    ],
    avatar: [
      { required: true, message: "头像地址不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    password: [
      { required: true, message: "密码不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    status: [
      { required: true, message: "帐号状态不能为空", trigger: "change" }
    ],
    loginIp: [
      { required: true, message: "最后登录IP不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    loginDate: [
      { required: true, message: "最后登录时间不能为空", trigger: "blur" }
    ],
    remark: [
      { required: true, message: "备注不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    supplier: [
      { required: true, message: "供应商名称不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    contactName: [
      { required: true, message: "联系人姓名不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    gender: [
      { required: true, message: "性别不能为空", trigger: "blur" }
    ],
    phone: [
      { required: true, message: "联系电话不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
    ],
    wechat: [
      { required: true, message: "微信不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    department: [
      { required: true, message: "部门不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    position: [
      { required: true, message: "职位不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    counterpart: [
      { required: true, message: "对接人不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    createdAt: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询用户信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await hmSupplierList(queryParams.value);
  userList.value = res.rows;
  total.value = res.total;
  Object.assign(infoData, res.rows[0])
  loading.value = false;
}


onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
:deep(.el-select) {
  width: 100% !important;
}

.mb40 {
  margin-bottom: 40px;
}

.mt17 {
  margin-top: 17px;
}

.font-color-yellow {
  color: #FFDF72 !important;
}

.h473 {
  height: 473px !important;
}

.h_auto100 {
  height: calc(100% - 10px) !important;
}

.h_auto473 {
  height: calc(100% - 473px) !important;
}

.big-screen-box-live {
  position: relative;
  background: url("@/assets/images/screen/icon_beijing.png");
  // background: #ccc;
  background-size: cover;
  color: #66FFFF;
  // height: 100%;
  width: 100%;
  padding: 0 7px;
  box-sizing: border-box;
  overflow: hidden;

  .el-table--fit {
    background: none;
  }

  :deep(.pagination-box) {
    margin: 30px 0;

    .el-pager {

      li,
      .btn-next,
      .btn-prev,
      .btn-prev {
        margin-right: 15px;
        background: url("@/assets/images/screen/icon_fanye@2x.png");
        background-size: cover;
        color: #66FFFF;
      }
    }
  }

  // 分页
  :deep(.el-pagination button),
  :deep(.el-pagination button.is-disabled),
  :deep(.el-pagination button:disabled) {
    background: url("@/assets/images/screen/icon_fanye@2x.png");
    background-size: cover;
    color: #66FFFF;
    margin-right: 15px;
  }

  .screen-header {
    height: 130px;
    background: url("@/assets/images/screen/icon_toubu@2x.png");
    background-size: 100% 100%;

    .left-date-box {
      background: url("@/assets/images/screen/icon_riqi@2x.png") 100% no-repeat;
      background-size: 100% 100%;
      height: 78px;
      max-width: 308px;
      margin: 0 auto;
      position: relative;
      top: 24px;

      p {
        margin: 0;
        line-height: 34px;
      }

      .date-p {
        font-size: 16px;
        text-indent: 2em;
      }

      .week-p {
        font-size: 12px;
        text-align: right;
        margin-right: 2em;
      }
    }



    .right-date-box {
      height: 60px;
      max-width: 406px;
      background: url("@/assets/images/screen/icon_zhouqi@2x.png") 100% no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding-left: 14px;
      font-size: 14px;
      position: relative;
      top: 24px;

      .el-button--primary.is-plain {
        border: 1px solid #66FFFF;
        color: #66FFFF;
        background: none;
      }
    }

    .screenTitle {
      // width: 600px;
      text-align: center;
      height: 40px;
      font-family: AlibabaSansKR, AlibabaSansKR;
      font-weight: bold;
      font-size: 40px;
      color: #FFFFFF;
      line-height: 2px;
      letter-spacing: 3px;
      font-style: normal;
    }


  }

  .screen-border-style {
    width: 100%;
    border: 2px solid #1D74F1;
    border-radius: 0px 0px 10px 10px;
    position: relative;
    overflow: hidden;
  }

  .screen-border-style::before {
    content: " ";
    width: 6px;
    height: 15px;
    background: #0E5FFF;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .screen-border-style::after {
    content: " ";
    width: 6px;
    height: 15px;
    background: #0E5FFF;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;

  }

  .screen-title-box {
    background: url("@/assets/images/screen/icon_wenzikuang@2x.png") 100% no-repeat;
    background-size: 100% 100%;
    width: 200px;
    height: 35px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 35px;
    margin: 0 0 0 20px;
    position: relative;
    top: -1px
  }

  .position-left {
    position: absolute;
    left: 20px;
  }

  .back-btn {
    // border: 1px solid #66FFFF;
    width: 80px;
    height: 30px;
    color: #66FFFF;
    background: none;
    background: #0935B7;
    border: 1px solid #0E5DFB;
    // font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    border-radius: 0;
    position: fixed;
    top: 70px;
    left: 40px;
    z-index: 100;
  }
}

.person-list-box {
  .person-box {
    height: 175px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 15px;

    h2 {
      font-weight: 600;
      font-size: 20px;
      color: #FFFFFF;
      line-height: 20px;
      letter-spacing: 1px;
      display: block;
      margin: 15px 0;
      text-align: center;
      // position: absolute;
      // z-index: 1;
      // top: 0;
      // left: 47%;
    }

    .person-info-box {
      padding: 10px;
      display: flex;

      .left-avtar {
        width: 20%;
        // height: 200px;
        // padding: 20px 0;
        // text-align: center;
        display: flex;
        align-items: center;

        img {
          // display: blcok;
          width: 70px;
          height: 100px;
          // margin: 0 auto;
          border-radius: 10px;
          border: 1px solid rgb(1, 147, 255);
        }

        .info-content-box {
          flex: 1;
          padding-left: 20px;


          .info-content {
            // width: 50%;
            // display: flex;
            padding-top: 6px;
            margin-bottom: 6px;

            &>span {
              // display: block;
              height: 16px;
            }


          }
        }
      }

      .info-title {
        width: 150px;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF !important;
        line-height: 16px;
        text-align: right;

        &::after {
          content: '：';
        }
      }

      .info-value {
        font-size: 16px;
        color: #19ECFF !important;
        line-height: 16px;
        text-align: left;
        font-weight: bold;
      }

      .right-info {
        // padding: 20px;
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .info-content {
          width: 33.33%;
        }
      }


    }


  }
}
</style>